import Vue from 'vue'
//注册'v-class'  当元素出现在可视范围时添加类名出发样式
Vue.directive('class', {
  inserted: function (el, binding) {
  // 聚焦元素
  binding.addClass = () => {
    const h = document.documentElement.clientHeight || document.body.clientHeight
    const { bottom } = el.getBoundingClientRect()
    if ( bottom < h) {
      let index = el.className.indexOf(binding.value) > 0
      if(!index){
        el.className =  el.className + ' '+ binding.value
      }
    } else {
      let index = el.className.indexOf(binding.value) > 0
      if(index){
        el.className = el.className.replace(binding.value, '')
      }
    }
  }

    window.addEventListener('scroll', binding.addClass,true)

    binding.addClass()
  },
  unbind: function (el, binding) {
    if (binding.addClass) {
      window.removeEventListener('scroll', binding.addClass)
    }
  }
}) 


Vue.directive('class2', {
  inserted: function (el, binding) {
    // 聚焦元素
    binding.addClass = () => {
      const h = document.documentElement.clientHeight || document.body.clientHeight
      const { top } = el.getBoundingClientRect()
      if ( top < h) {
        let index = el.className.indexOf(binding.value) > 0
        if(!index){
          el.className =  el.className + ' '+ binding.value
        }
      } else {
        let index =el.className.indexOf(binding.value) > 0
        if(index){
          el.className = el.className.replace(binding.value, '')
        }
      }
    }
    window.addEventListener('scroll', binding.addClass,true)

    binding.addClass()


  },
  unbind: function (el, binding) {
    if (binding.addClass) {
      window.removeEventListener('scroll', binding.addClass)
    }
  }
}) 

Vue.directive('transition', {
  bind(el, binding) {
    let property = 'all'
    let duration = '.5s'
    let fn = 'linear'
    let delay = ''
    if(binding.value) {
      property = binding.value.property ? binding.value.property : 'all'
      duration = binding.value.duration ? binding.value.duration : '.5s'
      fn = binding.value.fn ? binding.value.fn : 'linear'
      delay = binding.value.delay ? binding.value.delay : ''
    }
    el.style.transition = `${property} ${duration} ${fn} ${delay}`
  },
  inserted(el, binding) {
    binding.mytransition = () => {
      const h = document.documentElement.clientHeight || document.body.clientHeight
      const { top } = el.getBoundingClientRect()
      if ( top < h) {
        if(binding.value && binding.value.transform) {
          el.style.transform = 'translateY(0px)'
        } else {
          el.style.transform = 'translateY(0px)'
        }
      } else {
        if(binding.value && binding.value.transform) {
          el.style.transform = binding.value.transform
        } else {
          el.style.transform = 'translateY(100px)'
        }
      }
    }
    window.addEventListener('scroll', binding.mytransition, true)
    binding.mytransition()
  },
  unbind(el, binding) {
    if (binding.mytransition) {
      window.removeEventListener('scroll', binding.mytransition)
    }
  }
})


//注册'v-height'  判断当前元素的高度
Vue.directive('height', {
  inserted: function (el, binding) {
  // 聚焦元素
    binding.height = () => {
      const { bottom, top } = el.getBoundingClientRect()
      if((bottom- top) > binding.value){
        el.parentElement.className = el.parentElement.className + ' specOverHeight'
        

      }

    
  }


    binding.height()
  },
  unbind: function (el, binding) {
    if (binding.height) {
      console.log('取消事件绑定')
    }
  }
}) 
